<template name='imgsBanner'>
  <view class="imgsBannerBox">
    <swiper
      class="imgsBanner_swiper"
      :current="comCurrentImg"
      @change="changCurrent"
    >
      <swiper-item v-for="(item, index) in imgList" :key="index">
        <image :src="item" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <!-- 图片位置 -->
    <view class="imgLength">{{
      comCurrentImg + 1 + "/" + imgList.length
    }}</view>
    <!-- <scroll-view scroll-x="true" class="scrollImgBox" :scroll-left='scrollImgList' scroll-with-animation>
				<view class="scrollImgList">
					<image :src="item" mode="aspectFill" v-for="(item,index) in imgList" :key='index' :class="comCurrentImg==index?'activeImageItem':''" @click="onClickImg(index)" :id="'item'+index"></image>
				</view>
			</scroll-view> -->
  </view>
</template>

<script>
export default {
  name: "imgsBanner",
  props: {
    imgList: {
      type: Array,
      value: [],
    },
    currentImg: {
      type: Number,
      value: 0,
    },
  },
  data() {
    return {
      comCurrentImg: 0,
      scrollImgList: 0,
      imgLeftList: [],
    };
  },
  created() {
    this.comCurrentImg = this.currentImg;
  },
  mounted() {
    uni.getSystemInfo({
      success: (res) => {
        this.imgList.forEach((i, v) => {
          let info = uni.createSelectorQuery().in(this);
          info
            .select("#item" + v)
            .boundingClientRect((res) => {
              this.imgLeftList.push(res.left);
            })
            .exec();
        });
        this.imgListScroll(this.comCurrentImg);
      },
    });
  },
  methods: {
    onClickImg(index) {
      this.comCurrentImg = index;
      this.imgListScroll(index);
    },
    changCurrent(e) {
      this.comCurrentImg = e.target.current;
      this.imgListScroll(e.target.current);
    },
    // 图片滑动
    imgListScroll(index) {
      if (index >= 2) {
        this.scrollImgList = this.imgLeftList[index - 2];
      } else {
        this.scrollImgList = 0;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.imgsBannerBox {
  position: relative;
}
.imgLength {
  position: absolute;
  top: 694rpx;
  right: 24rpx;
  background: rgba(0, 0, 0, 0.34);
  padding: 0 12rpx;
  line-height: 32rpx;
  font-size: 22rpx;
  border-radius: 16rpx;
  color: #fff;
}
.imgsBanner_swiper {
  height: 420rpx;
  swiper-item {
    height: 100%;
    image {
      width: 100%;
      height: 420rpx;
      object-fit: cover;
    }
  }
}
.scrollImgBox {
  .scrollImgList {
    white-space: nowrap;
    image {
      width: 132rpx;
      height: 132rpx;
      margin-right: 16rpx;
      display: inline-block;
      border: 6rpx solid #fff;
    }
    image:last-child {
      margin-right: 0;
    }
    .activeImageItem {
      border: 6rpx solid #f57341;
    }
  }
}
</style>
